<template>
     <div>
    <!-- 顶部搜索条 -->
    <div class="search">
      <div class="search-input">
        <icon type="search" size="16" color="#999"/>
         {{keyw}}
      </div>
    </div>
    <!-- Tab效果 -->
    <div class="tabs">
      <div class="tab-item" v-for="(item,index) in tabs" :key="index" :class="currentIndex==index?'active':''" >
          {{item}}
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="goods_list">
      <navigator class='goods-item' v-for="item in listData" :key="item.goods_id" 
     :url="'/pages/goods_detail/main?gid=' + item.goods_id">
        <img :src="item.goods_small_logo">
        <div class="goods-right">
          <h4>{{item.goods_name}}</h4>
          <div class="price">
            <span>￥</span>{{item.goods_price}}
          </div>
        </div>
      </navigator>
    </div>
    <!-- 没有更多数据了 -->
    <div class="more" v-show="hasMore">没有更多数据了</div>
  </div>
</template>

<script>
import request from '../../utils/request';
export default {
    data(){
        return{
            // 搜索条上关键字
            keyw:'',
            // 标题分类
            tabs:['综合','销量','价格'],
            // 定义一个索引
            currentIndex:0,
            // 定义分类索引与长度
            pagenum:1,
            pagesize:20,
            // 搜索结果数组
            listData:[],
            // 定义请求的状态位
            isloading:false,
            // 用于判定是否还是数据下载
            hasMore:false,
            // 定义页数
            total:0
        }
    },
    methods:{
       async initData(){
           
        // 这里做节流操作
         if(this.isloading){
             return
         }
        
        //  更改isloading状态,起到截流效果
         this.isloading = true;
        let res = await request('goods/search',{
            query:this.keyw,
            pagenum:this.pagenum,
            pagesize:this.pagesize
        })
        this.listData = [...this.listData,...res.data.message.goods];
        this.total = rea.data.message.total;
        // 放开进行下次数据请求
        this.isloading = false;

         // 如果列表的长度大于等于total，就表示没有更多数据了
        if(this.listData.length>=this.total){
            this.hasMore = true
        }
        }
    },
    onLoad(param){
      this.keyw = param.keyword;
      this.initData();
    },
    onReachBottom(){
        // 这是微信里面提供的触底事件
        this.initData();
    }
}
</script>

<style lang="less" scoped>
    @import './main.less';
</style>

